<script setup>
import { computed } from 'vue'
import { router } from '@inertiajs/vue3'
import { ArrowLeftIcon } from '@heroicons/vue/24/outline'
import Container from './Container.vue'
import Prose from './Prose.vue'
import { formatDate } from '@/Components/Spotlight/utils/formatDate.js'

const props = defineProps({
  article: {
    type: Object,
    required: true
  }
})

const showBackButton = computed(() => true)

const goBack = () => {
  if (window.history.length > 1) {
    window.history.back()
  } else {
    router.visit(route('blog.home'))
  }
}
</script>

<template>
  <Container class="mt-16 lg:mt-32">
    <div class="xl:relative">
      <div class="mx-auto max-w-2xl">
        <button
          v-if="showBackButton"
          type="button"
          @click="goBack"
          aria-label="Go back to articles"
          class="group mb-8 flex h-10 w-10 items-center justify-center rounded-full bg-white shadow-md ring-1 ring-zinc-800/5 ring-zinc-900/5 transition lg:absolute lg:-left-5 lg:-mt-2 lg:mb-0 xl:-top-1.5 xl:left-0 xl:mt-0 dark:border dark:border-zinc-700/50 dark:bg-zinc-800 dark:ring-0 dark:ring-white/10 dark:hover:border-zinc-700 dark:hover:ring-white/20"
        >
          <ArrowLeftIcon class="h-4 w-4 stroke-zinc-500 transition group-hover:stroke-zinc-700 dark:stroke-zinc-500 dark:group-hover:stroke-zinc-400" />
        </button>
        <article>
          <header class="flex flex-col">
            <h1 class="mt-6 text-4xl font-bold tracking-tight text-zinc-800 sm:text-5xl dark:text-zinc-100">
              {{ props.article.title }}
            </h1>
            <time
              :dateTime="props.article.date"
              class="order-first flex items-center text-base text-zinc-400 dark:text-zinc-500"
            >
              <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
              <span class="ml-3">{{ formatDate(props.article.date) }}</span>
            </time>
          </header>
          <Prose class="mt-8">
            <slot />
          </Prose>
        </article>
      </div>
    </div>
  </Container>
</template>
